
<template>
  <!--    vue框架-->
  <div id="app">
    <h1>个人设置</h1>
<el-form :model="formData" ref="form" label-width="100px">
        <el-form-item label="登录账号：" prop="loginAccount">
          <el-input v-model="formData.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="角色权限：" prop="rolePermissions">
          <el-input v-model="formData.role" disabled></el-input>
        </el-form-item>
        <el-form-item label="真实姓名：" prop="realName">
          <el-input v-model="formData.zsname"></el-input>
<!--          <el-tooltip class="item" effect="dark" :content="zsname" v-if="zsname">-->
<!--            <i class="el-icon-warning-outline"></i>-->
<!--          </el-tooltip>-->
        </el-form-item>
        <el-form-item label="新密码：" prop="newPassword">
          <el-input v-model="updatePassword.password1" type="password"></el-input>
<!--          <el-tooltip class="item" effect="dark" :content="newPasswordError" v-if="newPasswordError">-->
<!--            <i class="el-icon-warning-outline"></i>-->
<!--          </el-tooltip>-->
        </el-form-item>
        <el-form-item label="重复新密码：" prop="repeatNewPassword">
          <el-input v-model="updatePassword.password2" type="password"></el-input>
<!--          <el-tooltip class="item" effect="dark" :content="repeatNewPasswordError" v-if="repeatNewPasswordError">-->
<!--            <i class="el-icon-warning-outline"></i>-->
<!--          </el-tooltip>-->
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="save">保存</el-button>
        </el-form-item>
        <el-tooltip class="item" effect="dark" :content="successTip" v-if="successTip">
          <i class="el-icon-info-outline"></i>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" :content="errorTip" v-if="errorTip">
          <i class="el-icon-warning-outline"></i>
        </el-tooltip>
      </el-form>
  </div>
</template>

<style scoped>
.el-form-item{
  width: 50%;
}
</style>

<script>
export default {
  data() {
    return {
      user:{},
      formData:{},
      updatePassword:{},
    };
  },
  methods: {
    save() {
          // 重置表单验证
          this.$refs.form.resetFields();

          // 真实姓名验证
          if (this.formData.zsname == '') {
            this.$message.error('真实姓名不能为空');
            return;
          }

          // 新密码验证
          if (this.updatePassword.password1 == '' || this.updatePassword.password1 == null) {
            this.$message.error('新密码不能为空');
            return;
          }
          if (this.updatePassword.password1.length < 6 || this.updatePassword.password1.length > 20) {
            this.$message.error('新密码长度应在6 - 20个字符之间');
            return;
          }

          // 重复新密码验证
          if (this.updatePassword.password2 == '') {
            this.$message.error('重复新密码不能为空');
            return;
          }
          if (this.updatePassword.password2!= this.updatePassword.password1) {
            this.$message.error('两次输入的新密码不一致');
            return;
          }
          this.axios.post(`http://localhost:8000/xm-user-login/xm-login/updatePassword?password1=${this.updatePassword.password1}&id=${this.user.id}`).then(res => {
            if (res.data.code === 200) {
              this.$message.success("修改成功！");
              location.href = '#/daohang';
            } else {
              this.$message.error(res.data.data);
            }
          })
        },
    findById(){
      this.axios.get(`http://localhost:8000/xm-user-login/xm-login/findById?id=${this.user.id}`).then(res => {
        this.formData=res.data.data;
      })
    },
  },
  created() {
    this.user=JSON.parse(sessionStorage.getItem('userDB'));
    this.findById();
  }
};
</script>
